
import '../pages/cssmodule/dlxg.module.css';

import React, { useState, useEffect } from 'react';

const LoginSuccessAnimation = () => {
  const [rotation, setRotation] = useState(0);
  const [scale, setScale] = useState(1);
  const [color, setColor] = useState('#3498db');

  useEffect(() => {
    let animationId;
    const animate = () => {
      setRotation(prev => prev + 1.2);
      setScale(1 + 0.04 * Math.sin(Date.now() / 300));
      animationId = requestAnimationFrame(animate);
    };
    animate();
    return () => cancelAnimationFrame(animationId);
  }, []);

  useEffect(() => {
    const colorChangeInterval = setInterval(() => {
      const colors = ['#3498db', '#e74c3c', '#2ecc71', '#f39c12', '#9b59b6'];
      setColor(colors[Math.floor(Math.random() * colors.length)]);
    }, 1800);
    return () => clearInterval(colorChangeInterval);
  }, []);

  const generateSpiralPaths = () => {
    const paths = [];
    const arms = 6;
    const segments = 60;
    for (let arm = 0; arm < arms; arm++) {
      let path = `M 200 200`;
      const angleOffset = (Math.PI * 2 / arms) * arm;
      for (let i = 0; i <= segments; i++) {
        const t = i / segments * 6 * Math.PI;
        const r = 140 * t / (6 * Math.PI);
        const x = 200 + r * Math.cos(t + angleOffset);
        const y = 200 + r * Math.sin(t + angleOffset);
        path += ` L ${x} ${y}`;
      }
      paths.push(
        <path
          key={arm}
          d={path}
          stroke={color}
          strokeWidth="3"
          fill="none"
          opacity={0.7 - (arm * 0.09)}
          filter="url(#glow)"
        />
      );
    }
    return paths;
  };

  return (
    <div className="login-success-bg">
      <div className="login-success-center">
        <svg
          viewBox="0 0 400 400"
          className="login-success-svg"
          style={{
            transform: `rotate(${rotation}deg) scale(${scale})`,
            transition: 'transform 0.2s'
          }}
        >
          <defs>
            <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
              <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
              <feMerge>
                <feMergeNode in="coloredBlur"/>
                <feMergeNode in="SourceGraphic"/>
              </feMerge>
            </filter>
          </defs>
          {generateSpiralPaths()}
          <circle
            cx="200"
            cy="200"
            r="18"
            fill={color}
            filter="url(#glow)"
            style={{ opacity: 0.9 }}
          />
          <circle
            cx="200"
            cy="200"
            r="32"
            fill="none"
            stroke={color}
            strokeWidth="2"
            opacity="0.3"
          />
        </svg>
        <div className="login-success-text">登录成功，欢迎进入系统！</div>
      </div>
    </div>
  );
};

export default LoginSuccessAnimation;